<template>
    <div>
        <img v-show="format!='二维码'" ref="jsbord" :width="height" >
        <qrcode-vue v-show="false" :value="value" :size="300" :id="'qrcodeBox'+value"></qrcode-vue>
        <img v-show="format=='二维码'" :src="url" :width="height" >
    </div>
</template>
<script setup>
import {watch,ref,onMounted} from "vue"
const props = defineProps({
    value:{
        type:[String, Number],
        default:'1234'
    },
    format:{//类型
        type:[String],
        default:"CODE39"
    },
    width:{//条之间的宽
        type:[String,Number],
        default:3
    },
    height: {
    type:[String, Number],
    default: 50
  },
  // 是否在条形码下方显示文字
  displayValue: {
    type: [String, Boolean],
    default: false
  }
})
let url = ref('')
let urlBox = ref('')
let jsbord =ref(null)
onMounted(()=>{
    caty()
})
watch(()=>{return props.format} ,()=>{
    setTimeout(()=>{
         caty()
    },500)
})
watch(()=>{return props.value} ,()=>{
    setTimeout(()=>{
         caty()
    },500)
})
const caty =()=>{
    if(props.format=='二维码'){
        let obj =document.getElementById('qrcodeBox'+props.value).toDataURL("image/jpg")
        url.value=obj
        
    }else{
        JsBarcode(jsbord.value,props.value,{
            format:props.format,
            text:props.value,
            displayValue:true,
        })
        // console.log(document.getElementById('barcodeBox'+props.value).getElementsByTagName('svg')[0]);
        // let svgXml = new XMLSerializer().serializeToString(document.getElementById('barcodeBox'+props.value).getElementsByTagName('svg')[0]);
        // urlBox.value= `data:image/svg+xml;base64,${window.btoa(svgXml)}`;
    }
}
</script>